<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>值的绑定补充</title>
</head>

<body>
    <script src="/js/vue.js"></script>  
    <div id ="app">
        <
        <ul>
            <li v-for="item in items" :key="item">{[item]}</li>
        </ul>
        <p>{{msg}}</p>

        
        <h2>{{name}}</h2>
        <button @click="btnClick()">button</button>
    </div>

    <script>
     
     let app = new Vue({
        el: '#app',
        data: {
            msg:'hello world',
            items:[1,2,3],
            name:['A','B','C','D']
        },
        methods: {
            btnClick(){
                
                this.name.splice(0,1,"shane")

                
                let total = 0
                function sum(...item){
                    
                    for (i in item){
                        total += item[i]
                    }

                    
                    for(i of item){
                        total += i
                    }
                    return total
                }
                console.log(sum(1,2,3,4,5,6,7,8,9))


                
                Vue.set(this.name,1,'Kitty')    
            }
        }
     })
    </script>
</body>

</html>